<template>
  <div id="summary">
    <title2 title="项目概况"></title2>
    <div class="states">
      <div class="left">
        <el-badge :value="summary.total" class="item">
          <el-button size="middle">Bug总数</el-button>
        </el-badge>
        <el-badge :value="summary.sum1" class="item" type="warning">
          <el-button size="middle">未修复Bug数</el-button>
        </el-badge>
        <el-badge :value="summary.sum2" class="item" type="primary">
          <el-button size="middle">待审核Bug数</el-button>
        </el-badge>
        <el-badge :value="summary.sum3" class="item" type="success">
          <el-button size="middle">已经解决Bug数</el-button>
        </el-badge>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
      </div>

    </div>
    <div id="bugs">
        <p><i class="el-icon-sunny" style="color:#67C23A; margin-right:10px; width:30px;"></i>最新的Bug</p>
        <bug-list :bugs="bugs"/>
    </div>
  </div>
</template>

<script>
import {recentBugs} from "./data/global";
import BugList from "./BugList";
import title2 from "./title"
export default {
  name: "ProjectDetailSummary",
  components:{BugList,title2},
  props:["projectId"],
  data(){
    return{
      bugs:recentBugs.bugs,
      summary:recentBugs.summary,
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    getData(){
      let config = {
        url:"/cbug/bug/recentBug",
        method:"post",
        data:{
          token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle",
          projectId:this.projectId
        }
      }
    }
  }
}
</script>

<style scoped>

/*  各种类型bug的数量统计按钮的样式 */
.item {
  margin-top: 10px;
  margin-right: 40px;
}

#bugs{
  padding:0 10px;
}

#bugs p{
  color:black;
  font-size:20px;
  line-height:60px;
  text-align: center;
}
</style>
